
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p109</title>
    <style>
        body{
            margin: 0px;
        }
        a{
            text-decoration: none;
        }
        #main{
            width: 100%;
            height: 450px;
            background-color: aqua;
        }
        #header{
            width: 100%;
            height: 80px;
            background-color: bisque;
        }
        #header div{
            margin-top: 20px;
            height: 30px;
        }
        #headers{
            width: 50%;
            float: left;
            background-color: rebeccapurple;

        }
        #headera{
            width: 50%;
            float: left;
            text-decoration: none;
            text-align: right;
            background-color: white;
        }
        #middle{
            width: 100%;
            height: 325px;
            background-color: olive;
        }
        #mdao{
            width: 100%;
            height: 80px;
            background-color: cadetblue;
        }
        #mdao div{
            width: 18%;
            float:left;
            background-color: goldenrod;
            border-right: 1px white solid;
            text-align: center;
            margin-top: 20px;
        }

        #mdao div:last-child{
            border-right: 1px white ;
        }
        #mdao a{
            text-decoration: none;
            color: aqua;
        }
        #div1{
            position: relative;
            left: 37px;
        }
        #mwen{
            width: 100%;
            height: 60px;
        }
        #wen1{
            height: 30px;
            background-color: rebeccapurple;
        }
        #wen2{
            height: 30px;
            background-color: lightblue;
        }
        #mbiao{
            height: 190px;
            background-color: wheat;
        }
        #footer{
            height: 45px;
        }
        #fdiv1{
            height: 15px;
            background-color: salmon;
        }
        #fdiv2{
            height: 30px;
            background-color: lightgreen;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="main">
    <div id="header">
        <div id="headers">
            <strong>网上书城</strong>
        </div>
        <div id="headera">
            <a href="#">[登录]</a>
            <a href="#">[注册]</a>
        </div>
    </div>
    <div id="middle">
        <div id="mdao">
            <div id="div1"><a href="#">首页</a></div>
            <div><a href="#">用户管理</a></div>
            <div><a href="#">购物车</a></div>
            <div><a href="#">订单</a></div>
            <div><a href="#">退出</a></div>
        </div>
        <div id="mwen">
            <div id="wen1"><em>>>欢迎访问    <strong>网上书城</strong></em></div>
            <div id="wen2"><em>网上书城    用户登录</em></div>
        </div>
        <div id="mbiao">
            <form action="#" method="get">
                <table align="center" border="1" width="750" cellspacing="0" >
                    <tr>
                        <td align="center" colspan="2" bgcolor="aqua">
                            输入你的用户名、登陆密码
                        </td>
                    </tr>
                    <tr>
                        <td>请输入您的用户名</td>
                        <td><input type="text"><a href="#">没有注册？</a></td>
                    </tr>
                    <tr>
                        <td>请输入您的密码</td>
                        <td><input type="password"></td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center"><input type="submit" value="登录"></td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
    <div id="footer">
        <div id="fdiv1"></div>
        <div id="fdiv2">Coptright 2009-2014 北京网上书城科技有限公司 电话：4000-118-118</div>
    </div>
</div>
</body>
</html>